<template>
	<nav-header title="成交佣金" custom-nav>
		<template v-slot:right>
		</template>
	</nav-header>
	<view class="container">
		<view class="left-item text-sm-Medium">成交佣金</view>
		<uni-easyinput type="number" class="right-input" :inputBorder="false" :clearable="false" @input="handleInput" v-model="transactionCommission" placeholder="请输入佣金价格">
			<template v-slot:right>
				<text class="price-unit text-sm-Regular">元/人</text>
			</template>
		</uni-easyinput>
	</view>
	<view>
		<text class="transaction-warning text-xs-Regular">*建议先和交易人协商 避免引起交易纠纷</text>

	</view>
	<view class="button-container">
		<view class="send-button">
			<!-- <up-button type="primary" @click="save" text="确认"></up-button> -->
			<button class="btncolor" type="primary" size="mini" @tap.stop.native="save">
				<text class="text-md-Medium">确认</text>
			</button>
		</view>
	</view>
</template>

<script>
	import useCooperateStore from '@/store/cooperateStore.js'
	export default {
		data() {
			return {
				transactionCommission: ''
			}
		},
		methods: {
			handleInput(event) {
				// let value = event.target.value;
				// // 只允许数字和小数点，且小数点只能有一个
				// value = value.replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1');
				// this.transactionCommission = value
			},
			save() {
				const bonus = this.transactionCommission
				const store = useCooperateStore()
				store.setBonus(bonus)
				uni.showToast({
					title: '设置成交佣金成功',
					icon: 'success',
					duration: 1000 // 设置显示时长为 3000 毫秒
				});

				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);

			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		padding: 24rpx 32rpx;
		flex-direction: column;
		gap: 24rpx;

		.left-item {
			color: $gray-900;
		}
	}

	.right-input {
		flex: 1;
		:deep(.uni-easyinput__content){
			height:88rpx;
			padding: 24rpx 32rpx !important;
			background-color: $gray-100 !important;
		}
		:deep(.uni-input-placeholder.uni-easyinput__placeholder-class){
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 400;
			color: $gray-400;
		}
		:deep(.uni-easyinput__content-input){
			padding: 0 !important;
		}
		.price-unit{
			color: $gray-400;
		}
	}

	.transaction-warning {
		width: 100%;
		padding: 24rpx 32rpx;
		color: $warning-500;
	}

	.button-container {
		position: fixed;
		bottom: 42rpx;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid $gray-200;
		z-index: 999;

		.send-button {
			padding: 24rpx 32rpx;

			.btncolor {
				width: 100%;
				background-color: $brand-500;
				color: $white;
				padding: 16rpx 32rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 46rpx;
				vertical-align: middle;
			}
		}
	}
</style>